<template>
	<HeaderNav />
	<article>
		<!-- 网站主体 -->
		<div id="main">
			<section class="aside">
				<!-- 定义右侧窗口信息 -->
				<UserAside />
				
				<Advice :data="advert"/>
			</section>
			
			<section style="min-height: 1170px;">
				<h1 class="detail-res-more">更多资源</h1>
				<div class="bg-hr"></div>
				<div id="sec-more-list" class="detail-col-list">
					<!-- 定义一个条目-->
					<div class="pro" v-for="res in resources">
					   <div class="img">
						   <img :src="extension(res.ext)" />
					   </div>
						<div class="cs">
							<div class="up">
								<a href="javascript:void(0)" @click="$router.push({name: 'resource-detail', params: {id: res.id}})">{{ res.resourceName }}</a>
							</div>
							<div class="down">
								<b class="type">
                  <template v-for="(type, index) in res.typeNames.split('::')">
                     {{ type }}
                     <i v-if="index != res.typeNames.split('::').length - 1">/</i>
                  </template>
                </b>
							</div>
						</div>
						<div class="arr">
							<span>积分:<b>{{ res.score }}</b></span>
						</div>
					</div>
					<!-- 分页插件 -->
					<VanPagination v-model="page" :totalItems="total" :itemsPerPage="rows" :showPageSize="5"
						:forceEllipses="true" @click-page="queryMoreResources"/>
					
				</div>
			</section>
		</div>
	</article>
	<Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue"; 
import VanPagination from '../components/VanPagination.vue' ;
import UserAside from "../components/UserAside.vue";
import Advice from "../components/Advice.vue";
	
export default {
	components: {
		HeaderNav, 
		Footer ,
		VanPagination ,
		UserAside ,
		Advice ,
	},
	props: {
		uid: {
			type:[Number, String], 
			required: true 
		}
	},
	data() {
		return {
			page: 1, 
			rows: 10,
      total: 0,
      advert: {},
      resources: [],
		}
	},
  created(){
    this.queryAdvert();
    this.queryMoreResources();
  },
  methods: {
    queryAdvert() {
      this.$api.queryAdvertRank().then(ret => {
        if (ret.status) {
          this.advert = ret.data;
        }
      })
    },
    queryMoreResources() {
       this.$api.queryResourceListByUid(this.page, this.rows, this.$route.params.uid).then(ret=> {
          if (ret.status) {
              this.resources = ret.data.records ;
              this.total = ret.data.total ;
          }
       })
    },
    extension(ext) {
      let supportExts = ["doc", "docx", "exe", "gif", "gz", "html", "md", "mp4", "pdf", "png", "ppt", "pptx", "rar", "rmvb", "txt", "wps", "xls", "xlsx", "zip", "7z", "avi", "bmp"];
      if (!supportExts.includes(ext)) {
        ext = "unknow";
      }
      // 在 Vue3 中 动态加载图片地址的方式
      return new URL("../assets/images/" + ext + ".svg", import.meta.url).href;
    },
  }
}
</script>

<style>
</style>